<?php include_once 'header.php'; ?>
<aside class="right-side">

    <section class="content-header">
        <h1>
            Dashboard
            <small>Website Statistics</small>
            <small
                style='text-align: right; color: red; margin-left: 120px;'><?php if (isset($error)) {
                    echo $error;
                } ?></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>


    <section class="content">
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>
                            <?php echo $newOrders; ?>
                        </h3>

                        <p>
                            New Orders
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>
                            53<sup style="font-size: 20px">%</sup>
                        </h3>

                        <p>
                            Bounce Rate
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>
                            <?php echo $newAgents; ?>
                        </h3>

                        <p>
                            Pending Registrations
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>
                            <?php echo $noOfProducts ?>
                        </h3>

                        <p>
                            Total Products
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-ios7-filing"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <div class="row">
            <section class="col-lg-6 connectedSortable">

                <div class="nav-tabs-custom">
                    <ul style="cursor: move;" class="nav nav-tabs pull-right">
                        <li class="active"><a id="pie-chart-tab" href="#">Users</a></li>
                        <li class=""><a id="order-chart-tab" href="#">Orders</a></li>
                        <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <div class="chart tab-pane chart-tab-pane active" id="pie-chart"
                             style="height:300px !important;display:block;">
                        </div>
                        <div class="chart tab-pane chart-tab-pane active" id="order-chart"
                             style="height:300px !important;display:none;">
                        </div>
                    </div>
                </div>
            </section>
            <section class="col-lg-6 connectedSortable">
                <div class="box box-primary">
                    <div class="box-header">
                        <div class="pull-right box-tools">
                            <!--<button class="btn btn-primary btn-sm daterange pull-right"
                                    data-toggle="tooltip" title="Date range">
                                <i class="fa fa-calendar"></i>
                            </button>-->
                        </div>
                        <i class="fa fa-signal"></i>

                        <h3 class="box-title">Month-wise Orders</h3>
                    </div>
                    <div id="year-sales" class="box-body no-padding" style="height:290px;">
                    </div>
                    <div class="overlay loader month-order-chart" ></div>
                    <div class="loading-img loader month-order-chart"></div>
                </div>
            </section>
        </div>
    </section>
</aside>
<?php include 'footer.php'; ?>
<script type="text/javascript">
    var YEAR = new Date().getFullYear();
    $(document).ready(function () {
        $("#order-chart-tab").click(function () {
            $(".chart-tab-pane").hide();
            $("#order-chart").show();
            $("#pie-chart-tab").parent().removeClass("active");
            $(this).parent().addClass("active");
        });

        $("#pie-chart-tab").click(function () {
            $(".chart-tab-pane").hide();
            $("#pie-chart").show();
            $("#order-chart-tab").parent().removeClass("active");
            $(this).parent().addClass("active");
        });
    });
    google.load("visualization", "1", {packages: ["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        drawPie();
        drawTimeLine();
    }

    function drawPie() {
        $.get("dashbord/agentsVsAnonymous", function (jsonData) {
            if (!jsonData.error) {
                var data = google.visualization.arrayToDataTable([
                    ['Type', 'No Of Orders'],
                    ['Agents', parseInt(jsonData.data.agents)],
                    ['Anonymous', parseInt(jsonData.data.anonymous)]
                ]);
                var options = {
                    title: 'Agents Vs Anonymous',
                    pieHole: 0.4,
                    width: 500,
                    height: 300
                };
                var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
                chart.draw(data, options);
            }
        });

        $.get("dashbord/orderTypes", function (jsonData) {
            if (!jsonData.error) {
                var data = google.visualization.arrayToDataTable([
                    ['Type', 'No Of Orders'],
                    ['New', parseInt(jsonData.data.new)],
                    ['Completed', parseInt(jsonData.data.completed)],
                    ['Canclled', parseInt(jsonData.data.cancel)]
                ]);
                var options = {
                    title: 'New Vs Completed Vs Cancelled',
                    pieHole: 0.4,
                    width: 500,
                    height: 300
                };
                var chart = new google.visualization.PieChart(document.getElementById('order-chart'));
                chart.draw(data, options);
            }
        });
    }

    function drawTimeLine() {
        $.get("dashbord/getSalesForYear/"+YEAR, function (response) {
            if (!response.error) {
                var map = new google.visualization.DataTable();
                map.addRows(response.data.length);
                map.addColumn('string', 'Month');
                map.addColumn('number', 'Orders');
                $.each(response.data, function (index, value) {
                    map.setValue(index, 0, value.month);
                    map.setValue(index, 1, parseInt(value.sales));
                });
                var options = {
                    title: 'Order by Month for '+ YEAR,
                    hAxis: {title: 'Month', titleTextStyle: {color: '#333'}},
                    height: 290,
                    chartArea: {width: '80%'},
                    legend: {position: 'left'}
                };
                var chart = new google.visualization.AreaChart(document.getElementById('year-sales'));
                chart.draw(map, options);
            }
        }).always(function(){
             $(".month-order-chart").hide();
        });
    }
</script>
